<template>
	<view class="registration-form-page">
		<view class="form-block" style="border-radius:30rpx 30rpx 0 0 ;">
			<view class="form-title" style="text-align: center;">肃北县县域劳动力2024年补贴性职业技能培训意愿调查问卷</view>

			<view class="form-item">
				<view class="form-label"><text class="require">*</text>1.本县劳动力/非本县劳动力：</view>
				<view class="form-content">
					<view class="form1">
						<picker class="form-ctrl" :range="isLocal" range-key="value" :value="isLocalIndex"
							@change="bindPicker($event,'isLocal')">
							{{form.isLocal==0 ? "请选择" : isLocal[isLocalIndex]['value']}}
						</picker>
						<view class="iconfont text"></view>
					</view>
				</view>
			</view>
			<view class="form-item" v-if="form.isLocal === '是'">
				<view class="form-label"><text class="require">*</text>2.您所在街道/乡镇</view>
				<view class="form-content">
					<uni-section title="街道社区" type="line" padding class="form-ctrl">
						<uni-data-picker placeholder="请选择您所在的街道/乡镇" popup-title="请选择社区" :localdata="list" :map="listMap"
							v-model="form.localAddress">
						</uni-data-picker>
					</uni-section>
				</view>
			</view>
			<view class="form-item" v-if="form.isLocal === '否'">
				<view class="form-label"><text class="require">*</text>2.您的户籍所在地</view>
				<view class="form-content">
					<view class="form-content">
						<input v-model.trim="form.notLocalAddress" type="text" placeholder="请输入户籍所在地"
							placeholder-class="inputPlaceholder" class="form-ctrl" />
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require">*</text>3.您的姓名</view>
				<view class="form-content">
					<view class="form-content">
						<input v-model.trim="form.name" type="text" placeholder="请输入姓名"
							placeholder-class="inputPlaceholder" class="form-ctrl" />
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require">*</text>4.您的性别</view>
				<view class="form-content">
					<picker class="form-ctrl" :range="sex" range-key="value" :value="sexIndex"
						@change="bindPicker($event,'sex')">
						{{form.sex==0 ? "请选择性别" : sex[sexIndex]['value']}}
					</picker>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require">*</text>5.您的年龄</view>
				<view class="form-content">
					<input v-model.trim="form.age" maxlength="20" type="number" placeholder="请输入年龄"
						placeholder-class="inputPlaceholder" class="form-ctrl" />
				</view>
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require">*</text>民族</view>
				<view class="form-content">
					<picker class="form-ctrl" :range="nationId" range-key="name" :value="nationIdIndex"
						@change="bindPicker2($event,'nationId')">
						{{form.nationId==0 ? "请选择民族" : nationId[nationIdIndex]['name']}}
					</picker>
					<view class="iconfont icon-gengduo1 arrow"></view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require">*</text>7.您的联系电话</view>
				<view class="form-content">
					<input v-model.trim="form.mobile" maxlength="11" type="number" placeholder="请输入联系电话"
						placeholder-class="inputPlaceholder" class="form-ctrl" />
				</view>
			</view>
			<view class="form-item" >
				<view class="form-label"><text class="require">*</text>8.人员类别</view>
				<view class="form-content">
					<picker class="form-ctrl" :range="type" range-key="value" :value="typeIndex"
						@change="bindPicker($event,'type')">
						{{form.type==0 ? "请选择您目前的情况" : type[typeIndex]['value']}}
					</picker>
					<view class="iconfont icon-gengduo1 arrow"></view>
				</view>
				<view class="form-content" v-if="typeIndex==4">
					<textarea v-model.trim="form.typeOther" placeholder="请说明..." style="height: 200rpx;"
						placeholder-class="inputPlaceholder" class="form-ctrl1" maxlength="150">
					</textarea>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require">*</text>9.您参加过职业技能培训吗？</view>
				<view class="form-content">
					<view class="form1">
						<picker class="form-ctrl" :range="isTrain" range-key="value" :value="isTrainIndex"
							@change="bindPicker($event,'isTrain')">
							{{form.isTrain==0 ? "请选择" : isTrain[isTrainIndex]['value']}}
						</picker>
						<view class="iconfont text"></view>
					</view>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require">*</text>10.您的技能培训意愿</view>
				<view class="form-content">
					<view class="form1">
						<MultipleCheckbox :range="trainWish" @selected="bindTownship($event,'trainWish')">
						</MultipleCheckbox>
<!-- 						<picker class="form-ctrl" :range="trainWish" range-key="value" :value="trainWishIndex"
							@change="bindPicker($event,'trainWish')">
							{{form.trainWish==0 ? "请选择" : trainWish[trainWishIndex]['value']}}
						</picker> -->
						<view class="iconfont text"></view>
					</view>
				</view>
				<view class="form-content" v-model="form.trainWishOther" v-if="trainWishOther">
					<textarea  placeholder="请说明..." style="height: 200rpx;"
						placeholder-class="inputPlaceholder" class="form-ctrl1" maxlength="150">
					</textarea>
				</view>
			</view>
			<view class="form-item">
				<view class="form-label"><text class="require">*</text>11.您现在从事的职业是?</view>
				<view class="form-content">
					<view class="form1">
						<picker class="form-ctrl" :range="career" range-key="value" :value="careerIndex"
							@change="bindPicker($event,'career')">
							{{form.career==0 ? "请选择" : career[careerIndex]['value']}}
						</picker>
						<view class="iconfont text"></view>
					</view>
					<view class="form-content" v-if="careerIndex==4">
						<textarea v-model.trim="form.careerOther" placeholder="请说明..." style="height: 200rpx;"
							placeholder-class="inputPlaceholder" class="form-ctrl1" maxlength="150">
						</textarea>
					</view>
				</view>
			</view>
			<view class="form-item" v-if="careerIndex == 3">
				<view class="form-label"><text class="require">*</text>12.您的就业意愿</view>
				<view class="form-content">
					<view class="form-content">
						<input v-model.trim="form.workWish" type="text" placeholder="请输入就业意愿"
							placeholder-class="inputPlaceholder" class="form-ctrl" />
					</view>
				</view>
			</view>
			<view class="form-item" v-if="careerIndex == 3">
				<view class="form-label">13.期望薪资</view>
				<view class="form-content">
					<picker class="form-ctrl" mode="multiSelector" :value="salaryIndexArr" :range="salary"
						@columnchange="salaryColChange" @change="salaryChange">{{form.salaryMin}}-{{form.salaryMax}}元
					</picker>
					<view class="iconfont icon-gengduo1 arrow"></view>
				</view>
			</view>
		</view>
		<view class="btn" @click="submit">提交问卷</view>
	</view>
	</view>
</template>

<script>
	import {
		getSalaryData
	} from '@/util/util.js'
	import {
		validate
	} from '@/util/validate.js'
	import {
		insertTrainInvestigateApi
	} from '@/api/registration.js'
	import {
		getQuestionnaireConfigCus,
	} from '@/api/registration.js'
		import {getQuestionnaireConfig} from '@/api/registration.js'
		import MultipleCheckbox from '@/page_other/registration/MultipleCheckbox.vue'
	export default {
		components: {
			MultipleCheckbox
		},
		data() {
			return {
				listMap: {
					text: 'data',
					value: 'code',
					children: 'sonList'
				},
				areaList: [],
				form: {
					isLocal: '',
					localAddress: '',
					notLocalAddress: '',
					name: '',
					age: '',
					sex: '',
					nationId: '',
					mobile: '',
					type: '',
					typeOther: '',
					isTrain: '',
					isNeed: '',
					trainWish: '',
					career: '',
					workWish: '',
					salaryMin: 0,
					salaryMax: 0,
					trainWishOther: '',
					careerOther: '',
				},
				trainWishOther: false,
				list: [],
				listMap: {
					text: 'name',
					value: 'id',
					children: 'child'
				},
				rules: {
					isLocal: {
						name: '本县劳动力/非本县劳动力',
						required: true,
					},
					name: {
						name: '姓名',
						required: true,
					},
					age: {
						name: '年龄',
						required: true
					},
					sex: {
						name: '性别',
						required: true,
						validator: function(value, form, callback) {
							if (value == 0) {
								callback('请选择性别')
							}
							callback();
						}
					},
					nationId:{
						required:true,
						name:'民族',
					},
					mobile:{
						required:true,
						name:'联系电话',
					},
					type:{
						required:true,
						name:'您目前的情况',
					},
					isTrain:{
						required:true,
						name:'您参加过职业技能培训吗',
					},
					trainWish:{
						required:true,
						name:'您的技能培训意愿',
					},
					career:{
						required:true,
						name:'您现在从事的职业是',
					},


				},
				isLocal: [{
					id: 1,
					value: '是'
				}, {
					id: 2,
					value: '否'
				}, ],
				isLocalIndex: 0,
				
				sex: [{
					id: 1,
					value: '男'
				}, {
					id: 2,
					value: '女'
				}],
				sexIndex: 0,
				nationId:[],
				nationIdIndex:0,
				type:[{
					id: 1,
					value: '高校毕业生'
				}, {
					id: 2,
					value: '退役军人'
				}, {
					id: 3,
					value: '残疾人'
				}, {
					id: 4,
					value: '低保户'
				}, {
					id: 5,
					value: '其他'
				}],
				typeIndex:0,
				isTrain:[{
					id: 1,
					value: '参加过'
				}, {
					id: 2,
					value: '没参加过'
				}, {
					id: 3,
					value: '了解一点'
				},],
				isTrainIndex:0,
				isNeed:[{
					id: 1,
					value: '不需要'
				}, {
					id: 2,
					value: '需要'
				}, {
					id: 3,
					value: '可能需要'
				}, {
					id: 4,
					value: '急需要'
				}, {
					id: 5,
					value: '急迫需要'
				},],
				isNeedIndex:0,
				trainWish:[{
					id: 1,
					value: '泥瓦工'
				}, {
					id: 2,
					value: '无人机智慧放牧'
				}, {
					id: 3,
					value: '家政服务'
				}, {
					id: 4,
					value: '电工'
				}, {
					id: 5,
					value: '焊工'
				},{
					id: 6,
					value: '计算机应用'
				},{
					id: 7,
					value: '其他'
				},],
				trainWishIndex:0,
				career:[{
					id: 1,
					value: '在校学生'
				}, {
					id: 2,
					value: '固定工作者'
				}, {
					id: 3,
					value: '自由职业者'
				}, {
					id: 4,
					value: '待业之中'
				}, {
					id: 5,
					value: '其他'
				},],
				careerIndex:0,
				//薪资选择
				salary: [],
				salaryIndexArr: [0, 0],
			}
		},
		watch:{
			'form.trainWish': {
				handler(val) {
					console.log(val)
					for (var i = 0; i < val.length; i++) {
						console.log(val[i].includes('其他'))
						if (val[i].includes('其他')) {
							this.trainWishOther = true
						} else {
							this.trainWishOther = false
						}
					}
				},
			},
		},
		methods: {
			salaryChange(e) {
				this.form.salaryMin = this.salary[0][e.detail.value[0]]
				this.form.salaryMax = this.salary[1][e.detail.value[1]]
			},
			salaryColChange(e) {
				if (e.detail.column == 0) {
					this.getSalary(e.detail.value + 1)
				}
			},
			getSalary(select) {
				this.salary = getSalaryData(select);
			},
			onchange(e) {
				console.log('onchange:', e);
			},
			onnodeclick(e) {
				console.log(e);
			},
			onpopupopened(e) {
				console.log('popupopened');
			},
			onpopupclosed(e) {
				console.log('popupclosed');
			},
			bindTownship(township, key) {
				this.$set(this.form, key, township);
			},
			bindPicker(e, key, rangeKey = '') {
				const index = e.detail.value;
				this.$set(this, key + 'Index', index);
				this.$set(this.form, key, this[rangeKey || key][index].value);
				if (this.form.domicile !== '其他（请说明）') {
					this.form.domicileIllustrate = ''
				}
			},
			bindPicker2(e, key, rangeKey = '') {
				const index = e.detail.value;
				this.$set(this, key + 'Index', index);
				this.$set(this.form, key, this[rangeKey || key][index].name)
			},
			submit() {
				if(this.form.isLocal == '是'&&!this.form.localAddress){
					this.showToast('请选择您所在街道/乡镇')
					return
				}
				if(this.form.isLocal == '否'&&!this.form.notLocalAddress){
					this.showToast('请填写您的户籍所在地')
					return
				}
				if(this.typeIndex==4&&!this.form.typeOther){
					this.showToast('请填写人员类别其他情况说明')
					return
				}
				if(this.trainWishIndex==6&&!this.form.trainWishOther){
					this.showToast('请填写培训意愿其他情况说明')
					return
				}
				if(this.careerIndex==4&&!this.form.careerOther){
					this.showToast('请填写您现在从事的职业其他情况说明')
					return
				}
				let form = JSON.parse(JSON.stringify(this.form))
				form.trainWish = form.trainWish.join(',');
				if (validate(form, this.rules)) {
					uni.showLoading({
						title: '提交中',
						mask: true
					})
					console.log(form)
					insertTrainInvestigateApi(form).then(() => {
						this.showToast('提交成功,感谢您的参与', () => {
							uni.switchTab({
								url: '/pages/home/index'
							})
						})
					})
				}
			},
			async getList() {
				getQuestionnaireConfigCus({
					type: 4
				}).then((res) => {
					this.list = res ?? [];
				})
				let nation = await getQuestionnaireConfig({type:1});
				this.nationId=nation;
				if(nation&&nation.length>0){
					this.form.nationId=nation[0].name
				}
			},
		},
		onLoad() {
			this.getList()
			this.getSalary(1);
		}

	}
</script>

<style lang="scss">
	page {
		background: #F7F6F9;
	}

	.registration-form-page {
		width: 100%;
		padding: 30rpx 30rpx 150rpx 30rpx;

		.btn {
			width: 350rpx;
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #FF0014;
			color: #fff;
			font-size: 28rpx;
			border-radius: 40rpx;
			position: fixed;
			transform: translate(-50%, -50%);
			left: 50%;
			bottom: 0rpx;
			z-index: 999999;
		}

		.user-photo-block {
			width: 100%;
			height: 450rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.user-photo {
				width: 180rpx;
				height: 180rpx;
				border-radius: 50%;
			}
		}

		.form-block {
			width: 100%;
			box-shadow: 0 0 10px 0 #efefef;
			background: #fff;
			padding: 30rpx;

			.form-title {
				font-size: 36rpx;
				font-weight: bold;
			}

			.sub-title {
				font-size: 26rpx;
				color: #999;
			}

			.form-item:last-child {
				border-bottom: none;
			}

			.form-item {
				display: flex;
				flex-direction: column;
				border-bottom: 1px solid #efefef;
				padding-top: 30rpx;

				.form-label {
					font-size: 28rpx;
					font-weight: bold;

					.require {
						color: red;
					}
				}

				.form-content {
					display: flex;
					flex-direction: row;
					align-items: center;

					.form {
						display: flex;
						flex-direction: row;
						align-items: center;
						width: 120rpx;
						margin-right: 20rpx;
					}

					.form1 {
						flex-direction: row;
						align-items: center;
						width: 100%;
						margin-right: 20rpx;
					}


					.form-ctrl {

						height: 100rpx;
						line-height: 100rpx;
						flex-grow: 1;
						color: #242424;
						font-size: 24rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.form-ctrl1 {
						height: 80rpx;
						line-height: 80rpx;
						flex-grow: 1;
						color: #242424;
						font-size: 24rpx;
					}

					.arrow {
						flex-grow: 0;
						color: #999;
						font-size: 24rpx;
					}

					.text {
						flex-grow: 0;
						color: #242424;
						font-size: 26rpx;
						width: 70rpx;
					}
				}
			}
		}
	}
</style>
